<!-- 新建order.vue报餐选择页面 -->
<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<text class="title">{{type === 'normal' ? '员工报餐' : '客餐预订'}}</text>
			<text class="date">2022年07月14日 周四</text>
		</view>

		<!-- 餐别选择 -->
		<view class="meal-type">
			<view v-for="(meal, index) in meals" :key="index" :class="['meal-btn', {active: currentMeal === index}]"
				@click="currentMeal = index">
				{{meal}}
			</view>
		</view>

		<!-- 每日菜单 -->
		<view class="menu-section">
			<view class="menu-item" v-for="(item, index) in currentMenu" :key="index">
				<text class="meal-time">{{item.meal}}</text>
				<view class="dishes">
					<text v-for="(dish, dIndex) in item.dishes" :key="dIndex" class="dish">
						{{dish}}
					</text>
					<text v-if="item.dishes.length === 0" class="empty">未设置菜品</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-bar">
			<button class="confirm-btn" @click="submitOrder">确定报餐</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'normal', // normal/guest
				currentMeal: 0, // 0:早餐 1:午餐 2:晚餐
				meals: ['早餐', '午餐', '晚餐'],
				menuData: {
					'2022-07-14': {
						breakfast: [],
						lunch: ['红烧肉', '小酥肉'],
						dinner: ['梅菜扣肉', '西蓝花']
					}
				}
			}
		},
		computed: {
			currentMenu() {
				return [{
						meal: '早餐',
						dishes: this.menuData['2022-07-14'].breakfast
					},
					{
						meal: '午餐',
						dishes: this.menuData['2022-07-14'].lunch
					},
					{
						meal: '晚餐',
						dishes: this.menuData['2022-07-14'].dinner
					}
				]
			}
		},
		onLoad(options) {
			this.type = options.type || 'normal'
			this.loadMenuData()
		},
		methods: {
			async loadMenuData() {
				try {
					const res = await uni.request({
						url: '/api/menu',
						method: 'GET',
						data: {
							date: '2022-07-14'
						}
					})
					this.menuData['2022-07-14'] = res.data
				} catch (error) {
					uni.showToast({
						title: '菜单加载失败',
						icon: 'none'
					})
				}
			},
			async submitOrder() {
				const orderData = {
					date: '2022-07-14',
					mealType: this.currentMeal,
					dishes: this.currentMenu[this.currentMeal].dishes,
					isGuest: this.type === 'guest'
				}

				try {
					await uni.request({
						url: '/api/order',
						method: 'POST',
						data: orderData
					})
					uni.showToast({
						title: '报餐成功'
					})
					setTimeout(() => uni.navigateBack(), 1500)
				} catch (error) {
					uni.showToast({
						title: '提交失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background: #f5f5f5;
		min-height: 100vh;

		.header {
			margin-bottom: 40rpx;

			.title {
				font-size: 44rpx;
				color: #333;
				display: block;
			}

			.date {
				font-size: 28rpx;
				color: #666;
			}
		}

		.meal-type {
			display: flex;
			margin-bottom: 40rpx;

			.meal-btn {
				flex: 1;
				text-align: center;
				padding: 20rpx;
				margin: 0 10rpx;
				background: #fff;
				border-radius: 10rpx;

				&.active {
					background: #007AFF;
					color: #fff;
				}
			}
		}

		.menu-section {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;

			.menu-item {
				margin-bottom: 40rpx;

				.meal-time {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 20rpx;
					display: block;
				}

				.dishes {
					.dish {
						display: inline-block;
						margin: 0 20rpx 10rpx 0;
						padding: 10rpx 20rpx;
						background: #f5f5f5;
						border-radius: 8rpx;
					}

					.empty {
						color: #999;
					}
				}
			}
		}

		.action-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx;
			background: #fff;

			.confirm-btn {
				background: #007AFF;
				color: #fff;
				border-radius: 50rpx;
			}
		}
	}
</style>